@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>物料选择</title>
    <link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
    <script src="~/scripts/jquery-3.4.1.min.js"></script>
    <script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>
    <style>
        body {
            padding: 15px;
            background: #f5f5f5;
        }
        .search-form {
            background: #fff;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 1px 2px rgba(0,0,0,.1);
            margin-bottom: 15px;
        }
        .table-container {
            background: #fff;
            padding: 20px;
            border-radius: 4px;
            box-shadow: 0 1px 2px rgba(0,0,0,.1);
        }
        .layui-form-item {
            margin-bottom: 15px;
        }
        .layui-form-label {
            width: 80px;
        }
        .layui-input-block {
            margin-left: 88px;
        }
    </style>
</head>
<body>
    <!-- 搜索表单 -->
    <div class="search-form">
        <form class="layui-form" lay-filter="searchForm">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">物料编码</label>
                        <div class="layui-input-block">
                            <input type="text" name="materielCode" placeholder="请输入物料编码" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">物料名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="materielName" placeholder="请输入物料名称" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn" lay-submit lay-filter="searchBtn">
                                <i class="layui-icon layui-icon-search"></i> 搜索
                            </button>
                            <button type="button" class="layui-btn layui-btn-primary" id="resetBtn">
                                <i class="layui-icon layui-icon-refresh"></i> 重置
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <!-- 物料列表表格 -->
    <div class="table-container">
        <table class="layui-hide" id="materialTable" lay-filter="materialTable"></table>
    </div>

    <!-- 操作按钮模板 -->
    <script type="text/html" id="operationTpl">
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="select">
            <i class="layui-icon layui-icon-ok"></i> 选择
        </a>
    </script>

    <!-- 启用状态模板 -->
    <script type="text/html" id="isNoTpl">
        {{# if(d.isNo === 1) { }}
            <span class="layui-badge layui-bg-green">启用</span>
        {{# } else { }}
            <span class="layui-badge">禁用</span>
        {{# } }}
    </script>

    <script>
        layui.use(['form', 'table', 'layer'], function() {
            var form = layui.form;
            var table = layui.table;
            var layer = layui.layer;

            // 初始化表格
            var materialTableIns = table.render({
                elem: '#materialTable',
                data: testMaterialData,
                method: 'GET',
                page: true,
                limits: [10, 20, 30, 50],
                limit: 10,
                cols: [[
                    {field: 'id', title: 'ID', width: 80, sort: true},
                    {field: 'materielCode', title: '物料编码', width: 150},
                    {field: 'materielName', title: '物料名称', width: 200},
                    {field: 'specifications', title: '规格型号', width: 180},
                    {field: 'unitsId', title: '单位', width: 80},
                    {field: 'materielTypePid', title: '物料类型', width: 100},
                    {field: 'isNo', title: '状态', width: 80, templet: '#isNoTpl'},
                    {field: 'createTime', title: '创建时间', width: 160, sort: true, templet: function(d) {
                        return formatDateTime(d.createTime);
                    }},
                    {title: '操作', width: 120, templet: '#operationTpl', fixed: 'right', align: 'center'}
                ]],
                parseData: function(res) {
                    return {
                        "code": 0,
                        "msg": "",
                        "count": res.pageCount || 0,
                        "data": res.listDate || []
                    };
                },
                request: {
                    pageName: 'page',
                    limitName: 'limit'
                },
                response: {
                    statusCode: 0
                }
            });

            // 搜索功能
            form.on('submit(searchBtn)', function(data) {
                var searchData = data.field;
                table.reload('materialTable', {
                    data: filteredData,
                    page: {
                        curr: 1
                    }
                });
                return false;
            });

            // 重置功能
            $('#resetBtn').on('click', function() {
                $('input[name="materielCode"]').val('');
                $('input[name="materielName"]').val('');
                table.reload('materialTable', {
                    data: testMaterialData,
                    page: {
                        curr: 1
                    }
                });
            });

            // 表格工具栏事件
            table.on('tool(materialTable)', function(obj) {
                var data = obj.data;
                if (obj.event === 'select') {
                    // 调用父页面的回调函数
                    if (parent.window.materialSelectCallback) {
                        parent.window.materialSelectCallback({
                            id: data.id,
                            code: data.materielCode,
                            name: data.materielName,
                            spec: data.specifications,
                            unit: data.unitsId
                        });
                    }
                }
            });

            // 格式化日期时间
            function formatDateTime(dateString) {
                if (!dateString) return '';
                var date = new Date(dateString);
                var year = date.getFullYear();
                var month = String(date.getMonth() + 1).padStart(2, '0');
                var day = String(date.getDate()).padStart(2, '0');
                var hours = String(date.getHours()).padStart(2, '0');
                var minutes = String(date.getMinutes()).padStart(2, '0');
                return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes;
            }
        });
    </script>
</body>
</html> 